<template>
  <div>
    <!-- 导航栏 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>API流量</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <div id="main"
           style="width: 750px;height:400px;"></div>
    </el-card>
  </div>
</template>

<script>
import echarts from 'echarts';
export default {
  data() {
    return {
      xData: [],
      yData: [],
    };
  },
  async mounted() {
    let myChart = echarts.init(document.getElementById('main'));

    const { data: res } = await this.$http.get('/api/getAPIData');
    if (res.status == 200) {
      for (let i = 0; i < res.apiData.length; i++) {
        this.xData.push(res.apiData[i].TopTime);
        this.yData.push(res.apiData[i].TopFlow);
      }
      this.$message.success(res.msg);
    }
    // 指定图表的配置项和数据
    let option = {
      title: {
        text: 'API流量图',
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: this.xData,
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '销量',
          type: 'line',
          data: this.yData,
          areaStyle: {},
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  },
};
</script>
<style scoped></style>
